<template>
	<view class="selection-container">
		<!-- 导航栏 -->
		<nav-bar title="狗道甄选" :show-back="false"></nav-bar>
		
		<!-- 头部搜索区域 -->
		<view class="search-header">
			<view class="search-input">
				<u-search
					placeholder="搜索宠物视频"
					v-model="searchKeyword"
					:showAction="false"
					:clearabled="true"
					@search="doSearch"
					:bgColor="'#F5F5F5'"
					:borderColor="'transparent'"
					height="70rpx"
				></u-search>
			</view>
			<view class="pet-filter" @click="toggleFilterDrawer">
				<u-icon name="grid" size="20" color="#5C4033"></u-icon>
				<text>筛选</text>
			</view>
		</view>

		<!-- 分类图标行 -->
		<view class="feature-section">
			<scroll-view scroll-x class="scroll-row" show-scrollbar="false">
				<view 
					class="feature-item" 
					v-for="(tab, index) in categoryTabs" 
					:key="index"
					:class="{ active: currentTab === index }"
					@click="switchTab(index)"
				>
					<view class="feature-icon">
						<image :src="tab.icon" mode="aspectFit"></image>
					</view>
					<text>{{ tab.name }}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 内容区域标题 -->
		<view class="section-header">
			<view class="left">
				<view class="title-bar"></view>
				<text class="title-text">精选视频</text>
			</view>
			<view class="right" @click="refreshVideos">
				<text>换一批</text>
				<u-icon name="reload" size="14" color="#5C4033"></u-icon>
			</view>
		</view>

		<!-- 视频瀑布流布局 -->
		<view class="video-waterfall" v-if="filteredVideos.length > 0">
			<view class="waterfall-column left-column">
				<view class="video-card" 
					v-for="(pet, index) in leftColumnVideos" 
					:key="pet.id"
					@click="openVideoPopup(pet)">
					<!-- 视频封面 -->
					<view class="video-cover">
						<image :src="getVideoThumbnail(pet)" mode="aspectFill"></image>
						<!-- 播放按钮 -->
						<view class="play-icon">
							<u-icon name="play-right-fill" size="40" color="#fff"></u-icon>
						</view>
						
						<!-- 视频时长 -->
						<view class="duration-badge">
							{{ pet.duration || '01:30' }}
						</view>
					</view>
					
					<!-- 视频信息 -->
					<view class="video-info">
						<view class="pet-avatar-row">
							<image class="pet-avatar" :src="getBreedAvatar(pet.breed)" mode="aspectFill"></image>
							<view class="pet-detail">
								<text class="pet-name">{{pet.name}}</text>
								<text class="pet-breed">{{pet.breed}}</text>
							</view>
						</view>
						
						<!-- 互动区域 -->
						<view class="interaction-bar">
							<view class="interaction-btn" @click.stop="likeVideo(pet)">
								<u-icon :name="pet.isLiked ? 'heart-fill' : 'heart'" size="16" :color="pet.isLiked ? '#FF6600' : '#999'"></u-icon>
								<text>{{ pet.likes || 0 }}</text>
							</view>
							<view class="interaction-btn" @click.stop="shareVideo(pet)">
								<u-icon name="share" size="16" color="#999"></u-icon>
								<text>分享</text>
							</view>
							<view class="product-link-btn" @click.stop="goToProduct(pet.id)">
								<text>查看宠物详情</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="waterfall-column right-column">
				<view class="video-card" 
					v-for="(pet, index) in rightColumnVideos" 
					:key="pet.id"
					@click="openVideoPopup(pet)">
					<!-- 视频封面 -->
					<view class="video-cover">
						<image :src="getVideoThumbnail(pet)" mode="aspectFill"></image>
						<!-- 播放按钮 -->
						<view class="play-icon">
							<u-icon name="play-right-fill" size="40" color="#fff"></u-icon>
						</view>
						
						<!-- 视频时长 -->
						<view class="duration-badge">
							{{ pet.duration || '01:30' }}
						</view>
					</view>
					
					<!-- 视频信息 -->
					<view class="video-info">
						<view class="pet-avatar-row">
							<image class="pet-avatar" :src="getBreedAvatar(pet.breed)" mode="aspectFill"></image>
							<view class="pet-detail">
								<text class="pet-name">{{pet.name}}</text>
								<text class="pet-breed">{{pet.breed}}</text>
							</view>
						</view>
						
						<!-- 互动区域 -->
						<view class="interaction-bar">
							<view class="interaction-btn" @click.stop="likeVideo(pet)">
								<u-icon :name="pet.isLiked ? 'heart-fill' : 'heart'" size="16" :color="pet.isLiked ? '#FF6600' : '#999'"></u-icon>
								<text>{{ pet.likes || 0 }}</text>
							</view>
							<view class="interaction-btn" @click.stop="shareVideo(pet)">
								<u-icon name="share" size="16" color="#999"></u-icon>
								<text>分享</text>
							</view>
							<view class="product-link-btn" @click.stop="goToProduct(pet.id)">
								<text>查看宠物详情</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				<view slot="message">
					<text class="empty-text">暂无相关视频内容</text>
				</view>
				<view slot="bottom" class="empty-actions">
					<u-button type="primary" size="medium" text="刷新" @click="refreshVideos"></u-button>
					<u-button plain size="medium" text="返回全部" @click="switchTab(0)"></u-button>
				</view>
			</u-empty>
		</view>
		
		<!-- 筛选抽屉 -->
		<u-popup mode="right" :show="showFilterDrawer" @close="closeFilterDrawer">
			<view class="filter-drawer">
				<view class="drawer-header">
					<text class="drawer-title">筛选条件</text>
					<u-icon name="close" size="20" @click="closeFilterDrawer"></u-icon>
				</view>
				<view class="filter-section">
					<view class="filter-title">宠物类型</view>
					<view class="filter-options">
						<view 
							class="filter-tag" 
							v-for="(item, index) in petTypeOptions" 
							:key="index"
							:class="{ active: selectedPetType === item.value }"
							@click="selectPetType(item.value)"
						>{{ item.label }}</view>
					</view>
				</view>
				<view class="filter-section">
					<view class="filter-title">视频排序</view>
					<view class="filter-options">
						<view 
							class="filter-tag" 
							v-for="(item, index) in sortOptions" 
							:key="index"
							:class="{ active: selectedSort === item.value }"
							@click="selectSort(item.value)"
						>{{ item.label }}</view>
					</view>
				</view>
				<view class="drawer-footer">
					<u-button type="primary" text="确定" @click="applyFilters"></u-button>
					<u-button plain type="info" text="重置" @click="resetFilters"></u-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 视频播放弹窗 -->
		<u-popup mode="center" :show="showVideoPopup" @close="closeVideoPopup" closeOnClickOverlay>
			<view class="video-popup">
				<view class="video-popup-header">
					<view class="video-title">{{ currentVideo ? currentVideo.name : '' }}</view>
					<u-icon name="close" size="24" color="#999" @click="closeVideoPopup"></u-icon>
				</view>
				<view class="video-container">
					<video 
						v-if="currentVideo"
						:id="'popup-video'"
						class="popup-video-player"
						:src="getVideoUrl(currentVideo.avatar)"
						:poster="getVideoThumbnail(currentVideo)"
						:controls="true"
						:autoplay="true"
						:loop="false"
						:show-loading="true"
						@ended="onVideoEnded"
					></video>
				</view>
				<view class="video-popup-info" v-if="currentVideo">
					<view class="video-info-row">
						<image class="video-author-avatar" :src="getBreedAvatar(currentVideo.breed)" mode="aspectFill"></image>
						<view class="video-author-info">
							<text class="video-author-name">{{ currentVideo.name }}</text>
							<text class="video-author-breed">{{ currentVideo.breed }}</text>
						</view>
					</view>
					<view class="video-actions">
						<view class="video-action-btn" @click="likeVideo(currentVideo)">
							<u-icon :name="currentVideo.isLiked ? 'heart-fill' : 'heart'" size="24" :color="currentVideo.isLiked ? '#FF6600' : '#999'"></u-icon>
							<text>{{ currentVideo.likes || 0 }}</text>
						</view>
						<view class="video-action-btn" @click="shareVideo(currentVideo)">
							<u-icon name="share" size="24" color="#999"></u-icon>
							<text>分享</text>
						</view>
						<u-button type="primary" text="查看宠物详情" @click="goToProduct(currentVideo.id)"></u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<custom-tab-bar></custom-tab-bar>
	</view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue';
import NavBar from '@/components/NavBar.vue';
import { getAllPetVideos } from '../../src/api/pet.js';
import uIcon from '@/node_modules/uview-ui/components/u-icon/u-icon.vue';
import uEmpty from '@/node_modules/uview-ui/components/u-empty/u-empty.vue';
import uPopup from '@/node_modules/uview-ui/components/u-popup/u-popup.vue';
import uButton from '@/node_modules/uview-ui/components/u-button/u-button.vue';
import uSearch from '@/node_modules/uview-ui/components/u-search/u-search.vue';

export default {
	components: {
		CustomTabBar,
		NavBar,
		uIcon,
		uEmpty,
		uPopup,
		uButton,
		uSearch
	},
	data() {
		return {
			petVideos: [],
			loading: false,
			currentTab: 0, // 当前选中的标签
			searchKeyword: '', // 搜索关键词
			showFilterDrawer: false, // 筛选抽屉
			selectedPetType: 'all', // 选中的宠物类型
			selectedSort: 'latest', // 选中的排序方式
			showVideoPopup: false, // 视频播放弹窗
			currentVideo: null, // 当前播放的视频对象
			
			categoryTabs: [
				{ name: '全部', breed: '', icon: '/static/fenlei/狗狗专区.png' },
				{ name: '狗狗', breed: '金毛,拉布拉多,柯基,泰迪', icon: '/static/fenlei/狗狗专区.png' },
				{ name: '猫咪', breed: '英短,美短', icon: '/static/fenlei/猫猫专区.png' },
				{ name: '小宠', breed: '仓鼠,金鱼', icon: '/static/fenlei/小宠专区.png' }
			],
			petTypeOptions: [
				{ label: '全部', value: 'all' },
				{ label: '狗狗', value: 'dog' },
				{ label: '猫咪', value: 'cat' },
				{ label: '小宠', value: 'small' }
			],
			sortOptions: [
				{ label: '最新发布', value: 'latest' },
				{ label: '最多点赞', value: 'likes' },
				{ label: '最多播放', value: 'views' }
			]
		};
	},
	computed: {
		// 根据当前选中的标签筛选视频
		filteredVideos() {
			let result = this.petVideos;
			
			// 根据标签筛选
			if (this.currentTab !== 0) {
				const breeds = this.categoryTabs[this.currentTab].breed.split(',');
				result = result.filter(pet => breeds.includes(pet.breed));
			}
			
			// 根据关键词搜索
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase();
				result = result.filter(pet => 
					pet.name.toLowerCase().includes(keyword) || 
					pet.breed.toLowerCase().includes(keyword)
				);
			}
			
			// 根据宠物类型筛选
			if (this.selectedPetType !== 'all') {
				if (this.selectedPetType === 'dog') {
					result = result.filter(pet => ['金毛', '拉布拉多', '柯基', '泰迪'].includes(pet.breed));
				} else if (this.selectedPetType === 'cat') {
					result = result.filter(pet => ['英短', '美短'].includes(pet.breed));
				} else if (this.selectedPetType === 'small') {
					result = result.filter(pet => ['仓鼠', '金鱼'].includes(pet.breed));
				}
			}
			
			// 根据排序方式
			if (this.selectedSort === 'likes') {
				result = [...result].sort((a, b) => b.likes - a.likes);
			} else if (this.selectedSort === 'views') {
				// 假设有views属性，没有的话随机生成
				result = [...result].sort((a, b) => (b.views || Math.random() * 100) - (a.views || Math.random() * 100));
			}
			
			return result;
		},
		
		// 左列视频
		leftColumnVideos() {
			return this.filteredVideos.filter((_, index) => index % 2 === 0);
		},
		
		// 右列视频
		rightColumnVideos() {
			return this.filteredVideos.filter((_, index) => index % 2 === 1);
		}
	},
	onLoad() {
		this.loadPetVideos();
	},
	onShow() {
		// 更新TabBar选中状态
		uni.$emit('updateTabBar', 2); // 2 表示甄选页
	},
	methods: {
		// 刷新视频列表
		refreshVideos() {
			this.loadPetVideos();
		},
		
		// 切换标签
		switchTab(index) {
			this.currentTab = index;
		},
		
		// 打开筛选抽屉
		toggleFilterDrawer() {
			this.showFilterDrawer = !this.showFilterDrawer;
		},
		
		// 关闭筛选抽屉
		closeFilterDrawer() {
			this.showFilterDrawer = false;
		},
		
		// 选择宠物类型
		selectPetType(type) {
			this.selectedPetType = type;
		},
		
		// 选择排序方式
		selectSort(sort) {
			this.selectedSort = sort;
		},
		
		// 应用筛选
		applyFilters() {
			this.closeFilterDrawer();
			// 筛选逻辑在computed中处理
		},
		
		// 重置筛选
		resetFilters() {
			this.selectedPetType = 'all';
			this.selectedSort = 'latest';
		},
		
		// 执行搜索
		doSearch() {
			// 如果搜索词为空则不执行搜索
			if (!this.searchKeyword.trim()) {
				return;
			}
			
			// 显示搜索提示
			uni.showToast({
				title: '搜索: ' + this.searchKeyword,
				icon: 'none',
				duration: 1500
			});
		},
		
		// 获取视频在原始数组中的索引
		getVideoIndex(id) {
			return this.petVideos.findIndex(pet => pet.id === id);
		},
		
		// 加载宠物视频
		async loadPetVideos() {
			this.loading = true;
			uni.showLoading({
				title: '加载中...'
			});
			
			try {
				const response = await getAllPetVideos();
				console.log('getAllPetVideos API Response:', response);
				if (response && response.code === 200) {
					// 添加额外属性
					this.petVideos = response.data.map(pet => ({
						...pet,
						likes: Math.floor(Math.random() * 100) + 1,
						views: Math.floor(Math.random() * 500) + 50,
						isLiked: false,
						duration: this.getRandomDuration()
					}));
				} else {
					console.error('API调用失败或无数据返回:', response);
					uni.showToast({
						title: '获取视频内容失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取视频失败:', error);
				uni.showToast({
					title: '网络异常，获取视频失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				uni.hideLoading();
			}
		},
		
		// 生成随机时长
		getRandomDuration() {
			const minutes = Math.floor(Math.random() * 2);
			const seconds = Math.floor(Math.random() * 59) + 1;
			return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		},
		
		// 获取品种头像
		getBreedAvatar(breed) {
			const breedImageMap = {
				'金毛': '/static/breeds/golden.jpg',
				'英短': '/static/breeds/british-shorthair.jpg',
				'拉布拉多': '/static/breeds/labrador.jpg',
				'美短': '/static/breeds/american-shorthair.jpg',
				'柯基': '/static/breeds/corgi.jpg',
				'泰迪': '/static/breeds/teddy.jpg',
				'金鱼': '/static/breeds/guinea-pig.jpg',
				'仓鼠': '/static/breeds/hamster.jpg'
			};

			return breedImageMap[breed] || '/static/breeds/default.jpg';
		},
		
		// 获取视频URL
		getVideoUrl(avatar) {
			if (!avatar) return '';
			
			// 如果已经是完整URL，直接返回
			if (avatar.startsWith('http')) {
				return avatar;
			}
			
			// 如果是相对路径，拼接后端地址
			return 'http://localhost:8081' + avatar;
		},
		
		// 获取视频缩略图
		getVideoThumbnail(pet) {
			// 如果有视频缩略图，则返回
			if (pet.img) return pet.img;
			
			// 根据品种返回默认图片
			const breedImageMap = {
				'金毛': '/static/breeds/golden.jpg',
				'英短': '/static/breeds/british-shorthair.jpg',
				'拉布拉多': '/static/breeds/labrador.jpg',
				'美短': '/static/breeds/american-shorthair.jpg',
				'柯基': '/static/breeds/corgi.jpg',
				'泰迪': '/static/breeds/teddy.jpg',
				'金鱼': '/static/breeds/guinea-pig.jpg',
				'仓鼠': '/static/breeds/hamster.jpg'
			};

			return breedImageMap[pet.breed] || '/static/dog.png';
		},
		
		// 点赞视频
		likeVideo(pet) {
			const index = this.petVideos.findIndex(item => item.id === pet.id);
			if (index !== -1) {
				if (this.petVideos[index].isLiked) {
					this.petVideos[index].likes--;
				} else {
					this.petVideos[index].likes++;
				}
				this.petVideos[index].isLiked = !this.petVideos[index].isLiked;
				
				// 显示提示
				uni.showToast({
					title: this.petVideos[index].isLiked ? '已点赞' : '已取消点赞',
					icon: 'none'
				});
			}
		},
		
		// 分享视频
		shareVideo(pet) {
			uni.showShareMenu({
				withShareTicket: true,
				success() {
					console.log('分享成功');
				},
				fail() {
					uni.showToast({
						title: '分享功能暂不可用',
						icon: 'none'
					});
				}
			});
		},
		
		// 跳转到宠物详情页
		goToProduct(productId) {
			if (!productId) return;
			
			uni.navigateTo({
				url: `/pages/pet/pet-info?id=${productId}`
			});
		},
		
		// 打开视频播放弹窗
		openVideoPopup(pet) {
			this.currentVideo = pet;
			this.showVideoPopup = true;
			
			// 更新播放次数
			if (!pet.views) pet.views = 0;
			pet.views++;
			
			// 延迟设置视频样式
			setTimeout(() => {
				const videoContainer = document.querySelector('.video-container');
				const videoElement = document.querySelector('.popup-video-player');
				
				if (videoContainer && videoElement) {
					// 调整视频大小
					const containerWidth = videoContainer.offsetWidth;
					videoElement.style.width = '100%';
					videoElement.style.height = (containerWidth * 9 / 16) + 'px';
				}
			}, 50);
		},
		
		// 关闭视频播放弹窗
		closeVideoPopup() {
			// 停止视频播放
			const videoContext = uni.createVideoContext('popup-video');
			if (videoContext) {
				videoContext.pause();
				videoContext.stop();
			}
			
			this.showVideoPopup = false;
			this.currentVideo = null;
		},
		
		// 视频播放结束
		onVideoEnded() {
			// 不需要自动关闭弹窗，让用户手动关闭
		}
	}
};
</script>

<style lang="scss">
$theme-color: #FF6600;
$theme-color-light: rgba(255, 102, 0, 0.1);
$primary-color: #5C4033;
$secondary-color: #A1887F;
$text-primary-color: #333333;
$text-secondary-color: #666666;
$card-bg-color: #FFFFFF;
$page-bg-color: #F5F5F5;
$border-radius: 16rpx;
$shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

.selection-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: $page-bg-color;
	padding-bottom: 120rpx;
	padding-top: calc(90rpx + var(--status-bar-height, 20px));
}

/* 搜索头部 */
.search-header {
	position: fixed;
	top: calc(90rpx + var(--status-bar-height, 20px));
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: $card-bg-color;
	box-shadow: $shadow;
	
	.search-input {
		flex: 1;
		margin-right: 20rpx;
		
		/deep/ .u-search {
			padding: 0;
			margin: 0;
			
			.u-search__content {
				background-color: #F5F5F5;
				border-radius: 40rpx;
			}
		}
	}
	
	.pet-filter {
		display: flex;
		align-items: center;
		background-color: #F0E4DE;
		padding: 15rpx 25rpx;
		border-radius: 40rpx;
		
		text {
			margin-left: 10rpx;
			color: $primary-color;
			font-size: 28rpx;
		}
	}
}

/* 分类图标区 */
.feature-section {
	margin: 130rpx 30rpx 30rpx;
	background-color: $card-bg-color;
	border-radius: $border-radius;
	padding: 30rpx 0;
	box-shadow: $shadow;
	position: relative;
	z-index: 10;
	
	.scroll-row {
		white-space: nowrap;
			width: 100%;
		
		&::-webkit-scrollbar {
			display: none;
		}
	}
	
	.feature-item {
		display: inline-block;
		width: 140rpx;
		text-align: center;
		margin: 0 20rpx;
		
		&.active {
			.feature-icon {
				background-color: $theme-color-light;
				border-color: $theme-color;
				
				image {
					transform: scale(1.1);
				}
			}
			
			text {
				color: $theme-color;
				font-weight: bold;
			}
		}
		
		.feature-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 15rpx;
			border: 2rpx solid transparent;
			transition: all 0.3s;
			
			image {
				width: 60%;
				height: 60%;
				transition: transform 0.3s;
			}
		}
		
		text {
			font-size: 26rpx;
			color: $text-primary-color;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

/* 内容区域标题 */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 30rpx 20rpx;
	
	.left {
		display: flex;
		align-items: center;
		
		.title-bar {
			width: 8rpx;
			height: 36rpx;
			background-color: $theme-color;
			border-radius: 4rpx;
			margin-right: 20rpx;
		}
		
		.title-text {
			font-size: 36rpx;
			font-weight: bold;
			color: $text-primary-color;
		}
	}
	
	.right {
		display: flex;
			align-items: center;
		
		text {
			font-size: 26rpx;
			color: $text-secondary-color;
			margin-right: 8rpx;
		}
	}
}

/* 视频瀑布流布局 */
.video-waterfall {
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	position: relative;
	z-index: 1;
	
	.waterfall-column {
		width: 48%;
		
		.video-card {
			background-color: $card-bg-color;
			border-radius: $border-radius;
			overflow: hidden;
			margin-bottom: 30rpx;
			box-shadow: $shadow;
			transition: transform 0.2s ease, box-shadow 0.2s ease;
			position: relative;
			
			&:active {
				transform: scale(0.98);
				box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.05);
			}
			
			.video-cover {
				position: relative;
				width: 100%;
				height: 0;
				padding-bottom: 133.33%; /* 3:4 比例 */
				overflow: hidden;
				
				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
			height: 100%;
					object-fit: cover;
				}
				
				.play-icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) scale(1);
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					background-color: rgba(0,0,0,0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 5;
					transition: transform 0.2s ease;
					pointer-events: none;
					
					&:active {
						transform: translate(-50%, -50%) scale(0.9);
					}
				}
				
				.duration-badge {
					position: absolute;
					right: 15rpx;
					bottom: 15rpx;
					background-color: rgba(0,0,0,0.6);
					color: #fff;
					font-size: 22rpx;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;
					z-index: 5;
					pointer-events: none;
				}
			}
			
			.video-info {
				padding: 20rpx;
				
				.pet-avatar-row {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					
					.pet-avatar {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						border: 2rpx solid #f5f5f5;
						margin-right: 15rpx;
						box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
					}
					
					.pet-detail {
						flex: 1;
						
						.pet-name {
				font-size: 28rpx;
							font-weight: bold;
							color: $text-primary-color;
							display: block;
							margin-bottom: 6rpx;
						}
						
						.pet-breed {
							font-size: 22rpx;
							color: $text-secondary-color;
							background-color: #F5F5F5;
							display: inline-block;
							padding: 4rpx 12rpx;
							border-radius: 20rpx;
						}
					}
				}
				
				.interaction-bar {
		display: flex;
					align-items: center;
					border-top: 1rpx solid #f5f5f5;
					padding-top: 15rpx;
					
					.interaction-btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 30rpx;
			position: relative;

						&:active::after {
					content: '';
					position: absolute;
							top: -10rpx;
							left: -10rpx;
							right: -10rpx;
					bottom: -10rpx;
							background-color: rgba(0,0,0,0.05);
							border-radius: 50%;
							z-index: -1;
						}
						
						text {
							font-size: 22rpx;
							color: $text-secondary-color;
							margin-top: 6rpx;
						}
					}
					
					.product-link-btn {
						flex: 1;
						background: linear-gradient(to right, $theme-color, #FF8C42);
						color: #fff;
						font-size: 24rpx;
						height: 60rpx;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 4rpx 8rpx rgba(255, 102, 0, 0.2);
						transition: transform 0.2s ease, box-shadow 0.2s ease;
						
						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 4rpx rgba(255, 102, 0, 0.1);
						}
					}
				}
			}
		}
	}
}

/* 空状态样式 */
.empty-state {
	margin: 60rpx 30rpx;
	background-color: $card-bg-color;
	border-radius: $border-radius;
	padding: 80rpx 30rpx;
	box-shadow: $shadow;
	
	.empty-text {
		font-size: 30rpx;
		color: $text-secondary-color;
	}
	
	.empty-actions {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		
		/deep/ .u-button {
			margin: 0 20rpx;
		}
	}
}

/* 筛选抽屉样式 */
.filter-drawer {
	width: 600rpx;
	height: 100%;
	padding: 30rpx;
	
	.drawer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		.drawer-title {
			font-size: 36rpx;
			font-weight: bold;
			color: $text-primary-color;
		}
	}
	
	.filter-section {
		margin: 40rpx 0;
		
		.filter-title {
			font-size: 32rpx;
			color: $text-primary-color;
			margin-bottom: 30rpx;
			font-weight: bold;
		}
		
		.filter-options {
			display: flex;
			flex-wrap: wrap;
			
			.filter-tag {
				padding: 15rpx 30rpx;
				background-color: #F5F5F5;
				color: $text-secondary-color;
				border-radius: 30rpx;
				margin-right: 20rpx;
		margin-bottom: 20rpx;
			font-size: 28rpx;

			&.active {
					background-color: $theme-color-light;
					color: $theme-color;
				font-weight: bold;
				}
			}
		}
	}
	
	.drawer-footer {
		position: absolute;
		bottom: 80rpx;
		left: 30rpx;
		right: 30rpx;
		display: flex;
		
		/deep/ .u-button {
			margin: 0 20rpx;
		}
	}
}

/* 视频播放弹窗样式 */
.video-popup {
	width: 90vw;
	max-width: 650rpx;
	background-color: $card-bg-color;
	border-radius: $border-radius;
	overflow: hidden;
	
	.video-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		.video-title {
			font-size: 32rpx;
			font-weight: bold;
			color: $text-primary-color;
			max-width: 450rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	
	.video-container {
		position: relative;
		width: 100%;
		
		.popup-video-player {
				width: 100%;
			height: 400rpx;
			background-color: #000;
		}
	}
	
	.video-popup-info {
		padding: 30rpx;
		
		.video-info-row {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.video-author-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 2rpx solid #f5f5f5;
				margin-right: 20rpx;
				box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
			}
			
			.video-author-info {
				flex: 1;
				
				.video-author-name {
					font-size: 30rpx;
					font-weight: bold;
					color: $text-primary-color;
				display: block;
					margin-bottom: 10rpx;
				}
				
				.video-author-breed {
					font-size: 24rpx;
					color: $text-secondary-color;
					background-color: #F5F5F5;
					display: inline-block;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
		
		.video-actions {
			display: flex;
			align-items: center;
			
			.video-action-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;
				position: relative;
				
				&:active::after {
					content: '';
					position: absolute;
					top: -10rpx;
					left: -10rpx;
					right: -10rpx;
					bottom: -10rpx;
					background-color: rgba(0,0,0,0.05);
					border-radius: 50%;
					z-index: -1;
					
				}
				
				text {
					font-size: 24rpx;
					color: $text-secondary-color;
					margin-top: 10rpx;
				}
			}
			
			/deep/ .u-button {
				flex: 1;
				height: 70rpx;
			}
		}
	}
}
</style>